/** @jsxImportSource @emotion/react */
// import {css} from '@emotion/react'
import React from "react";
import {Form, Input, Select} from "antd";

export interface User{
    id:string,
    name:string,
    email:string,
    title:string,
    organization:string,
    token: string
}

interface SearchPanelProps{
    users: User[],
    param: {
        name: string,
        personId :string

    },
    setParam:(param: SearchPanelProps['param']) => void
}
export const SearchPanel = ({setParam, param, users} : SearchPanelProps)=>{
    return <Form layout={"inline"} css={{marginBottom: '2rem'}}>
        <Form.Item>
            <Input type="text" value={param.name} onChange={ evt => setParam({
                ...param,
                name: evt.target.value
            })
            } placeholder={"项目名"}/>
        </Form.Item>
        <Form.Item>
            <Select
                value={param.personId} onChange={value => setParam({
                ...param,
                personId: value
            })}
            >
                <Select.Option value={''}>负责人</Select.Option>
                {
                    users.map(user => <Select.Option key={user.id} value={user.id} >{user.name}</Select.Option>)
                }
            </Select>
        </Form.Item>
    </Form>
}